<template>
	<breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
	<div class="table-wrapped">
		<!-- 顶部 -->
		<div class="table-top">
			<!-- 表格顶部 -->
			<div class="table-header">
				<!-- 搜索框 -->
				<div class="search-wrapped">
					<el-input v-model="adminAccount" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
						:prefix-icon="Search" @change="searchAdmin()" clearable @clear="clearInput()" />
				</div>
				<div class="button-wrapped">
					<el-button type="primary" @click="openCreate(2)">添加用户管理员</el-button>
				</div>
			</div>
			<!-- 表格内容 -->
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index"></el-table-column>
					<el-table-column prop="account" label="账号"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="department" label="部门"></el-table-column>
					<el-table-column prop="email" label="邮箱"></el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<el-button type="success" @click="openEdit">编辑</el-button>
							<el-button type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 底部 -->
		<div class="table-footer">
			<el-pagination :page-size="10" :current-page="paginationData.currentPage" :pager-count="7"
				:page-count="paginationData.pageCount" :total="adminTotal" @current-change="currentChange" background
				layout="prev, pager, next" />
		</div>
	</div>
	<create_admin ref="CreateAdmin"></create_admin>
	<edit_admin ref="Edit"></edit_admin>
	<delete_admin ref="Delete"></delete_admin>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue'
import breadCrumb from '@/components/bread_crumb.vue'
import { Search } from '@element-plus/icons-vue';
import create_admin from '../components/create_admin.vue';
import edit_admin from '../components/edit_admin.vue';
import delete_admin from '../components/delete_admin.vue';
import { bus } from "@/utils/mitt.js"
import { searchUserByAccount, getAdminListLength, returnListData } from '@/api/userinfor.js'

//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
	first: '用户管理',
	second: '用户管理员',
})
// 搜索框的modelValue
const adminAccount = ref<number>()
// 表格内容
const tableData = ref()

// 搜索函数
const searchAdmin = async () => {
	tableData.value = await searchUserByAccount(adminAccount.value, '用户管理员')
	paginationData.pageCount = 1
}
const adminTotal = ref<number>(0)
// 获取管理员数量 分页数据
const paginationData = reactive({
	// 总页数
	pageCount: 1,
	// 当前所处页数
	currentPage: 1
})

const getAdminListLengthFn = async () => {
	const res = await getAdminListLength('用户管理员')
	adminTotal.value = res.length
	paginationData.pageCount = Math.ceil(res.length / 10)
}
getAdminListLengthFn()
// 默认获取第一页的数据
const getFirstPageList = async () => {
	tableData.value = await returnListData(1, '用户管理员')
}
getFirstPageList()
// 监听换页
const currentChange = async (value: number) => {
	paginationData.currentPage = value
	tableData.value = await returnListData(paginationData.currentPage, '用户管理员')
}
// 当搜索内容清空后返回当前页面的数据
const clearInput = async () => {
	tableData.value = await returnListData(paginationData.currentPage, '用户管理员')
}

bus.on('adminDialogOff', async (id: number) => {
	// 当前页数
	const current = paginationData.currentPage
	// 1 是创建管理员
	if (id == 1) {
		getFirstPageList()
	}
	// 2 是编辑管理员
	if (id == 2) {
		tableData.value = await returnListData(paginationData.currentPage, '用户管理员')
	}
	// 3 是对管理员进行降职
	if (id == 3) {
		tableData.value = await returnListData(paginationData.currentPage, '用户管理员')
		if (tableData.value.length == 0) {
			paginationData.currentPage = current - 1
			getAdminListLength()

		}
	}
})

// 创建管理员
const CreateAdmin = ref()
const openCreate = (id: number) => {
	bus.emit('createId', id)
	// console.log(id)
	CreateAdmin.value.open()
}
// 编辑管理员
const Edit = ref()
const openEdit = (id: number) => {
	bus.emit('editId', id)
	Edit.value.open()
}
// 降级管理员
const Delete = ref()
const openDelete = (id: number) => {
	bus.emit('deleteId', id)
	Delete.value.open()
}

// 取消订阅/监听
onBeforeUnmount(() => {
	bus.all.clear()
})
</script>

<style scoped lang="scss"></style>